<template>
  <a-card :loading="loading">
    <search-bar :searchItems="searchItems" @search="searchHandle" />
    <table-page
      :table-cols="tableCols"
      :table-datas="tableDatas"
      :operationBtns="operationBtns"
      @operationHandel="operationHandel"
      :selectOptionDatas="selectOptionDatas"
    />
    <pagination
      :total="params.total"
      :limit="params.limit"
      :page="params.page"
      @pagination="paginationHandel"
    />
  </a-card>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import TablePage from "@/components/TablePage";
import Pagination from "@/components/Pagination";
import moment from "moment"

export default {
  components: {
    SearchBar,
    TablePage,
    Pagination,
  },
  data() {
    return {
      loading: false,
      searchItems: [
        { key: "startTime", label: "开始时间", type: "dateTime" },
        { key: "endTime", label: "结束时间", type: "dateTime" }
      ],
      tableCols: [
        { title: "商品名称", dataIndex: "productName" },
        { title: "规格", dataIndex: "model" },
        { title: "标签码", dataIndex: "barcode" },
        { title: "取用时间", dataIndex: "outboundTime" },
        { title: "取用手术间", dataIndex: "outboundAddress" },
        { title: "取用人", dataIndex: "outboundUserName" },
      ],
      operationBtns: [
        { key: "export", label: "导出", pos: "top", type: "primary", perm: [1, 9] },
      ],
      params: { total: 0, limit: 10, page: 0, startTime: moment().startOf("day").valueOf(), endTime: moment().endOf("day").valueOf() },
      tableDatas: [],
      selectOptionDatas:{},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$store
        .dispatch("barcode/queryReport", this.params)
        .then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
    },
    searchHandle(params) {
      if(params.startTime!=undefined && params.endTime != undefined){
        var dataTime = {
          startTime: moment(params.startTime).startOf("day").valueOf(),
          endTime: moment(params.endTime).endOf("day").valueOf(),
        }
        this.params = { ...this.params, ...dataTime };
        this.initData();
      }else{
        this.$message.error("请先选择开始时间和结束时间")
      }
    },
    operationHandel(row, event) {
      var vm = this;
      if (event === "export") {
        var params = vm.params
        params.page = 0
        params.limit = 500
        vm.download('/sys/barcode/report/export', {...params}, `物品取用报表_${new Date().getTime()}.xlsx`);
      }
    },
    paginationHandel({ page, limit }) {
      this.params.page = page;
      this.params.limit = limit;
      this.initData();
    }
  },
};
</script>
<style scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}
</style>